<template>
    <div>
        <Header :tap="title"/>
          <button id="showUserPicker" class="mui-btn mui-btn-block" type="button">一级选择示例 ...</button>
					<div id='userResult' class="ui-alert"></div>
        <Footer />
				<vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    </div>
</template>
<script>
import Header from "../commons/header.vue";
import Footer from "../commons/footer.vue";
import mui from "../../lib/mui/js/mui.min.js";
// import $ from 'jquery';
export default {
  data() {
    return {
      title: "搜索",
      slide1: [
        {
          src:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg",
          msrc:
            "https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg",
          alt: "picture1",
          title: "Image Caption 1",
          w: 400,
          h: 400
        },
        {
          src:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg",
          msrc:
            "https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg",
          alt: "picture2",
          title: "Image Caption 2",
          w: 1200,
          h: 900
        }
      ]
    };
	},
	methods:{
		 handleClose () {
        console.log('close event')
      }
	},
  mounted() {
    (function($, doc) {
      $.init();
      $.ready(function() {
        //普通示例
        var userPicker = new $.PopPicker();
        userPicker.setData([
          {
            value: "ywj",
            text: "董事长 叶文洁"
          },
          {
            value: "aaa",
            text: "总经理 艾AA"
          },
          {
            value: "lj",
            text: "罗辑"
          },
          {
            value: "ymt",
            text: "云天明"
          },
          {
            value: "shq",
            text: "史强"
          },
          {
            value: "zhbh",
            text: "章北海"
          },
          {
            value: "zhy",
            text: "庄颜"
          },
          {
            value: "gyf",
            text: "关一帆"
          },
          {
            value: "zhz",
            text: "智子"
          },
          {
            value: "gezh",
            text: "歌者"
          }
        ]);
        var showUserPickerButton = doc.getElementById("showUserPicker");
        var userResult = doc.getElementById("userResult");
        showUserPickerButton.addEventListener(
          "tap",
          function(event) {
            userPicker.show(function(items) {
              userResult.innerText = JSON.stringify(items[0]);
              //返回 false 可以阻止选择框的关闭
              //return false;
            });
          },
          false
        );
      });
    })(mui, document);
  },
  components: {
    Header,
    Footer
  }
};
</script>
<style scoped>
</style>


